<template>
    <el-menu :default-active="$route.path" background-color="#282c34" text-color="#fff" :router="true">
       
        <template v-for="item in menusData" :key="item.id">
            <!-- 带有二级菜单 -->
            <el-sub-menu v-if="item.children" :index="item.path">
                <template #title>
                    <el-icon v-if="item.icon">
                        <component :is="icons[item.icon]"></component>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </template>
                <!-- 重复需要递归的副级菜单 -->
                <template v-for="child in item.children">
                   <!-- 做判断二级 -->
                    <!-- 带三级菜单 -->
                    <el-sub-menu v-if=child.children :index="child.id">
                        <template #title>
                            <span>{{ child.title}}</span>
                        </template>

                        <el-menu-item v-for="child2 in child.children" :index="child2.path">
                            {{ child2.title }}
                        </el-menu-item>
                    </el-sub-menu>
                    <!-- 不带三级 -->
                    <el-menu-item v-else :index="child.path">
                        {{ child.title }}
                    </el-menu-item>
                </template>

            </el-sub-menu>
            <!-- 没有二级菜单 -->
            <el-menu-item v-else :index="item.path">
                <el-icon v-if="item.icon">
                    <component :is="icons[item.icon]"></component>
                </el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
        </template>

    </el-menu>

</template>

<script lang="ts" setup>
// 引入图标
import * as icons from '@element-plus/icons-vue';
import { ref } from 'vue';
// console.log(route);

// 定义每一个菜单对象的类型
interface MenuItem {
    id: string;
    title: string;
    children?: MenuItem[];
    // 1. 先通过 typeof 得到 icons 的类型
    // 2. 再 keyof 得到对象类型中所有键组成的联合类型
    icon?: keyof (typeof icons),
    path: string
}

const menusData = ref<MenuItem[]>([
    { id: '1', title: '主页', icon: 'HomeFilled', path: '/home' },
    {
        id: '2', title: '用户', icon: 'UserFilled', path: '/users',
        children: [
            { id: '2-1', title: '用户管理', path: '/users/list' },
            { id: '2-2', title: '用户分组', path: '/users/group' },
        ]
    },
    {
        id: '3', title: '订单', icon: 'List', path: "/orders/list",
        children: [
            { id: '3-1', title: '订单管理', path: "/orders/list" },
            { id: '3-2', title: '售后订单', path: "/orders/after" },
        ]
    },
    {
        id: '4', title: '设置', icon: 'Setting', path: "/setting",
        children: [
            { id: '4-1', title: '系统设置', path: "/setting/system" },
            {
                id: '4-2', title: '发货设置', path: "/setting/deliver",
                children: [
                    { id: '4-2-1', title: '配送员管理', path: "/setting/deliver/courier" },
                    { id: '4-2-2', title: '提货点设置', path: "/setting/deliver/address" },
                ]
            },
            {
                id: '4-3', title: '管理权限', path: "/authority/manage",
                children: [
                    { id: '4-3-1', title: '角色管理', path: "/user/manage" },
                    { id: '4-3-2', title: '权限设置', path: "/authority/setting" },
                ]
            },
        ]
    },
    {
        id: '5', title: '客服', icon: 'Bell',  path:"/server/list",
        children: [
            { id: '5-1', title: '客服列表', path: "/server/list" },
            { id: '5-2', title: '客服话术', path: "/server/erbal" },
        ]
    },
    {
        id: '6', title: '商品', icon: 'GoodsFilled',  path:"",
        children: [
            { id: '6-1', title: '商品管理', path: "/goods/list" },
            { id: '6-2', title: '商品分类', path: "/goods/classfiles" },
        ]
    },
])



</script>

<style scoped>
.el-menu {
    --el-menu-item-height: 50px;
    border-right: none;
    min-height: 100vh
}

/* 设置选中的菜单项的样式 */
.el-menu-item.is-active {
    color: #fff;
    background-color: #d462ff;
}
</style>